<template>
	<view class="page">
		<!-- 蓝牙状态提示 -->
		<view class="tips" :class="{ error: !isBluetoothAvailable }">
			<text>{{ isBluetoothAvailable ? '正在扫描附近设备...' : '蓝牙未开启，请开启蓝牙' }}</text>
		</view>

		<!-- 扫描框 -->
		<view class="box">
			<view class="title">扫描附近设备</view>
			<view class="image-container">
				<image class="bluetooth-icon" src="/static/lanya-2.png" mode="aspectFill"></image>
			</view>
			<view class="info">请将手机尽量靠近设备</view>
		</view>

		<!-- 设备列表 -->
		<view class="device-list">
			<view v-if="deviceList.length === 0" class="no-device">
				<text>暂无设备</text>
			</view>
			<view v-else class="device-item" v-for="(device, index) in deviceList" :key="index">
				<text>{{ device.name || '未知设备' }}</text>
				<button class="connect-btn" @click="connectDevice(device)">连接</button>
			</view>
		</view>

		<!-- 重新检查按钮 -->
		<button class="check-btn" @click="checkBluetooth">重新扫描</button>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      isBluetoothAvailable: true, // 蓝牙是否可用
	      deviceList: [], // 发现的蓝牙设备列表
	    };
	  },
	  methods: {
	    // 检查蓝牙状态
	    checkBluetooth() {
	      let that = this;
	      uni.openBluetoothAdapter({
	        success(res) {
	          console.log(res);
	          that.isBluetoothAvailable = true;
	          that.startScan();
	        },
	      });
	    },
	
	    // 开始扫描蓝牙设备
	    startScan() {
	      let that = this;
	      uni.openBluetoothAdapter({
	        success() {
	          uni.startBluetoothDevicesDiscovery({
	            success() {
	              // 监听设备发现
	              uni.onBluetoothDeviceFound((res) => {
	                that.deviceList = res.devices;
	              });
	              
	              // 设置7秒后停止扫描
	              setTimeout(() => {
	                that.stopScan();
	              }, 7000); // 7秒后停止扫描
	            },
	            fail() {
	              uni.showToast({
	                title: "扫描失败",
	                icon: "none",
	              });
	            },
	          });
	        },
	        fail() {
	          that.isBluetoothAvailable = false;
	          uni.showModal({
	            title: "蓝牙未开启",
	            content: "请在设置中开启蓝牙",
	            showCancel: false,
	          });
	        },
	      });
	    },
	
	    // 停止扫描
	    stopScan() {
	      uni.stopBluetoothDevicesDiscovery();
	    },
	
	    // 连接蓝牙设备
	    connectDevice(device) {
	      uni.createBLEConnection({
	        deviceId: device.deviceId,
	        success() {
	          uni.showToast({
	            title: "连接成功",
	            icon: "success",
	          });
	        },
	        fail() {
	          uni.showToast({
	            title: "连接失败",
	            icon: "none",
	          });
	        },
	      });
	    },
	  },
	
	  // 页面加载时自动检查蓝牙
	  onLoad() {
	    this.checkBluetooth();
	  },
	};
</script>

<style lang="scss">
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-color: #f4f6f9;
		padding: 40rpx;
	}

	.tips {
		font-size: 30rpx;
		color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		text-align: center;
		width: 90%;
		background-color: #4caf50;
	}

	.error {
		background-color: #ff5252;
	}

	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		padding: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		width: 85%;
		margin-top: 20rpx;
	}
	.bluetooth-icon{
		width: 50px;
		height: 50px;
	}
	.device-list {
		width: 85%;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 30rpx;
		text-align: center;
	}

	.connect-btn {
		background-color: #007aff;
		color: white;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		font-size: 26rpx;
	}

	.check-btn {
		margin-top: 30rpx;
		background-color: #007aff;
		color: white;
		padding: 20rpx 40rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}
</style>